<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--业务表单grid配置信息-->
<body class="easyui-layout">
<div id="west_tool">
    <a href="#" class="icon-refresh" onclick="onRefreshDataList()"></a>
</div>
<div data-options="region:'west',split:true,border:false,title:'业务表单列表',tools:'#west_tool'" style="width:150px;">
    <div id="list" class="easyui-datalist" data-options="url:'../form/list?formStatus=1',valueField:'tableName',textField:'formDisplay',method:'get',fit:true,border:false,animate:true,onClickRow:onListItemClick"></div>
</div>
<div data-options="region:'center',border:false" style="overflow: hidden;">
    <div class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'north',title:'基础配置',height:210">
            <div style="width:100%;padding: 5px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:false" onclick="onSave()">保存</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:false">删除</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-run',plain:false" onclick="onJx()">解析字段</a>
            </div>
            <form id="form">
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 80px">业务表名:</td>
                        <td style="width: 120px">
                            <input id="id" name="id" type="hidden"/>
                            <input id="tableName" name="tableName" class="easyui-textbox" style="width: 100%" data-options="required:true"/>
                        </td>
                        <td style="width: 80px">业务标识:</td>
                        <td style="width: 120px"><input id="formName" name="formName" class="easyui-textbox" style="width: 100%" data-options="required:true"/></td>
                        <td style="width: 80px">业务名称:</td>
                        <td style="width: 120px"><input id="formDisplay" name="formDisplay" class="easyui-textbox" style="width: 100%" data-options="required:true"/></td>
                        <td/>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <input id="formSql" name="formSql" class="easyui-textbox" data-options="prompt:'请输入有效的sql',multiline:true,height:60" style="width: 100%"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="7">
                            <input id="sqlParam" name="sqlParam" class="easyui-textbox" data-options="prompt:'请输入有效的参数'" style="width: 100%"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div data-options="region:'center',border:false">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'center',title:'显示内容配置'">
                    <table id="table" class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true,onClickRow:onGridRowClick">
                        <thead>
                        <tr>
                            <th data-options="field:'tableName',width:150">表名字</th>
                            <!--<th data-options="field:'columnName'">字段名</th>-->
                            <th data-options="field:'columnLabel',width:100">字段名</th>
                            <th data-options="field:'dataType',width:100">数据类型</th>
                            <th data-options="field:'columnComment'">备注</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div data-options="region:'east',title:'属性配置',split:true" style="width: 25%">
                    <table id="pgrid" class="easyui-propertygrid" data-options="onClickRow:onPGridClickRow,fit:true,scrollbarSize: 0,method:'get',url:'../utils/GridColumnConfig.json',columns:[
                        [
                            {field:'name',title:'属性',align:'left',halign:'center',width:100,sortable:false},
                            {field:'value',title:'值',align:'left',halign:'center',width:150,resizable:false}]
                        ]">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/utils/Form.js}"></script>
<script type="text/javascript">

    // datalist点击事件处理
    function onListItemClick(index, node) {
        // 默认显示
        $("#form").form("load", node);
        $("#id").val(0);

        if (node) {
            var tn = node.tableName;
            var fn = node.formName;
            loadFormGrid(fn, tn);
        }
    }

    // 获取业务表单表格配置信息
    function loadFormGrid(fn, tn) {
        AjaxUtil.post("fg?fn=" + fn + "&tn=" + tn, "", function (data) {
            $("#form").form("load", data);
            if (data) {
                loadFormGridColumn(fn);
            }
        });
    }

    // 获取业务表单表格显示字段配置信息
    function loadFormGridColumn(fn) {
        AjaxUtil.post("fgc?fn=" + fn, "", function (data) {
            if (data) {
                $("#table").datagrid("loadData", data);
            }
        });
    }

    // 刷新
    function onRefreshDataList() {
        $("#list").datalist("reload");
        $("#form").form("clear");

        $("#table").datagrid("loadData", []);
        $("#table").datagrid("unselectAll");

        $("#pgrid").propertygrid("reload", {});
        $("#pgrid").propertygrid("unselectAll");
    }

    // 解析
    function onJx() {
        var formSql = $("#formSql").textbox("getValue");
        AjaxUtil.post("jx?f=&s=" + formSql + "&p=", "", function (data) {
            if (data) {
                $("#table").datagrid("loadData", data);
            } else {
                AlertUtil.error("解析失败，请验证！")
            }
        });
    }

    // 表格点击事件处理
    function onGridRowClick(index, row) {
        showPGridRowData(row);
    }

    // 设置属性表格
    function showPGridRowData(row) {
        if (row) {
            var pRows = $("#pgrid").propertygrid("getData").rows;
            for (attr in row) {
                for (index in pRows) {
                    if (pRows[index]["attr"] == attr) {
                        pRows[index]["value"] = row[attr];
                    }
                }
            }
            $("#pgrid").propertygrid("loadData", pRows);
        }
    }

    // 保存数据
    function onSave() {
        var type = (($("#id").val() == "" || $("#id").val() == 0) ? "add" : "edit");
        var fg = {"id": 0, "tableName": $("#tableName").textbox("getValue"), "formName": $("#formName").textbox("getValue"), "formSql": $("#formSql").textbox("getValue"), "sqlParam": $("#sqlParam").textbox("getValue"), "pagination": 1};
        if (type == "edit") {
            fg.id = $("#id").val();
        }
        var rows = $("#table").datagrid("getRows")
        var json = {"type": type, "fg": fg, "rows": rows};
        var str = JSON.stringify(json)
        AjaxUtil.post("sc", {"p": str}, function (data) {
            AlertUtil.info(data.msg)
        })
    }

    // 属性设置，
    function onPGridClickRow(index,row) {
        // 获取选中行
        var columnItem = $("#table").datagrid("getSelected");
        if(columnItem) {
            // 属性变化的
            var rows = $("#pgrid").datagrid('getChanges');
            for (index in rows) {
                columnItem[rows[index]["attr"]]=rows[index]["value"];
            }
        }
    }


</script>
</body>
</html>